import { type FC } from 'react';
import { useMemoizedFn } from 'ahooks';
import { Feather } from '@expo/vector-icons';
import { View, Text, TouchableHighlight } from 'react-native';
import { primaryColor } from '@/constants/Colors';
import type { MenuItemProps } from './types';
import styles from './styles';

const MenuItem: FC<MenuItemProps> = (props) => {
  const { label, selected, isLast } = props;

  const onPress = useMemoizedFn(() => {
    props.onPress?.(props);
  });

  return (
    <>
      <TouchableHighlight
        underlayColor="#f2f2f2"
        onPressOut={onPress}
        style={styles.item}
      >
        <View style={styles.item_content}>
          <View style={{ flex: 1 }}>
            <Text style={styles.text}>
              {label}
            </Text>
          </View>
          {!!selected && (
            <Feather
              size={24}
              name="check"
              color={primaryColor}
            />
          )}
        </View>
      </TouchableHighlight>
      {!isLast && <View style={styles.line} />}
    </>
  );
}

export default MenuItem;